<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head('注册')">
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/layui/layui.css" rel="stylesheet">
    <link href="../static/css/myui.css" rel="stylesheet">
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="../static/layui/layui.js"></script>
    <script src="../static/jquery/jquery-3.7.1.min.js"></script>
</head>
<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<body th:style="'background-image: url(\'/avatars/background/bg_1.png\');'" style="background-image: url('https://file.mlog.club/images/2020/10/13/6e7933f5c9b2fe515210a17ea1762105.jpg');z-index: -1">

<th:block th:replace="_fragment::navigate(${user}, 0)"></th:block>

<div class="layui-card" style="position: absolute;padding: 20px;border-radius: 3px;left: 40%;top: 18%">
    <div class="layui-row" style="display: flex;justify-content: center">
        <span class="myui-nickname layui-font-22">KKBlog注册</span>
    </div>
    <div class="layui-row" style="display: flex;justify-content: center;margin-top: 10px">
        <span class="myui-font-color-gray layui-font-14">
            一个配置简单易上手的开源博客社区系统
        </span>
    </div>
    <form class="layui-form" style="margin-top: 10px" id="register-form">
        <div class="demo-reg-container">
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-email"></i>
                            </div>
                            <input type="text" name="email" id="email" required value="" lay-verify="required|email" placeholder="邮箱" lay-reqtext="请填写邮箱" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 11px;">
                            <button type="button" id="get-code-btn" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-vercode"></i>
                    </div>
                    <input type="text" name="vercode" value="" id="ver-code" required lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="username" value="" required lay-verify="required" placeholder="登录用户名(不可更改)" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="password" value="" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="confirmPassword" required value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="nickname" value="" required lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <input type="checkbox"  name="agreement" id="user-law-input" lay-skin="primary" title="同意">
                <a lay-on="user-law-iframe-handle" style="position: relative; top: 6px; left: -15px;color: #0badef;cursor: pointer">
                    <ins>用户协议</ins>
                </a>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" type="submit" id="submit-btn">注册</button>
            </div>
            <div class="layui-form-item demo-reg-other">
                <label>登录已有帐号？</label>
                <a href="/login" style="color: #0badef">点击此处登录</a>
            </div>
        </div>
    </form>
</div>
<div style="position: absolute;bottom: 0">
    <th:block th:replace="_fragment::footer"></th:block>
</div>
<script>
    let key,code;
    /*按钮禁用60秒,并显示倒计时*/
    function disabledButton(){
        $("#get-code-btn").attr({"disabled":"disabled"});     //控制按钮为禁用
        var second = 60;
        var intervalObj = setInterval(function () {
            $("#get-code-btn").text("重新获取" + "(" + second + ")");
            if(second == 0){
                $("#get-code-btn").text("获取验证码");
                $("#get-code-btn").removeAttr("disabled");//将按钮可用
                /* 清除已设置的setInterval对象 */
                clearInterval(intervalObj);
            }
            second--;
        }, 1000 );
    }


    $(document).ready(function () {
        // 提交动作
        $('#register-form').submit(function (e) {
            e.preventDefault();
            if(!$('#user-law-input').is(':checked')) {
                layer.msg('请勾选用户协议！', {icon: 0, shade: 0.3, time: 1000});
                return;
            }
            let loading = layer.msg('正在注册', {icon: 16, shade: 0.3, time: 0});
            $.post('/register/post?key=' + key + "&code=" + $('#ver-code').val(),
                $('#register-form').serialize(),
                function(res) {
                    layer.close(loading);
                    if (res.code !== 200) {
                        layer.open({
                            title: '注册失败'
                            ,content: res.msg
                        });
                    } else {
                        layer.open({
                            title: '注册成功'
                        });
                        window.location.href = "/login"
                    }
                });
        })

        $('#get-code-btn').on('click', function () {
            let email = $('#email').val();
            if (email === '') {
                layer.msg('请输入您的邮箱', {icon: 0}, function(){});
                return;
            }
            let loading = layer.msg('正在获取验证码...', {icon: 16, shade: 0.3, time: 0});
            $.get('/code/getEmail?email=' + email, function(res) {
                    layer.close(loading);
                    if (res.code !== 200) {
                        layer.open({
                            title: '获取失败'
                            ,content: res.msg
                        });
                    }
                    else {
                        disabledButton();
                        layer.msg(res.msg, {icon: 1}, function(){});
                        key = res.data.key
                        if (res.data.type === 1) {
                            $('#ver-code').val(res.data.code);
                        }
                    }
                });
        })
    })

    layui.use(function(){
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        // 事件
        util.on('lay-on', {
            'user-law-iframe-handle': function(){
                layer.open({
                    title: '用户协议',
                    type: 2,
                    area: ['600px', '400px'],
                    content: '/iframe/userLaw',
                    fixed: true, // 不固定
                    btn: ['确定'],
                    btnAlign: 'c',
                });
            }
        })
    });
</script>
</body>
</html>